<template>
  <div id="publicBot" class="footer">
    <ul>
      <li><a target="_blank" href="http://www.zsjx.cn/">中山技师学院官网</a></li>
      <li>
        <a href="#" class="connect-us">联系我们</a>
        <img id="qr-code" :src="connUs" alt="">
      </li>
      <li><a href="backstageLogin">后台入口</a></li>
      <li><a class="copyright">2021-2022&copy;网站设计与开发项目组</a></li>
    </ul>
  </div>
</template>

<script>
  import {ref,defineComponent, getCurrentInstance,} from "vue";
  export default defineComponent({
  name: "publicBot",
  setup(){
    const {proxy} = getCurrentInstance()
    let connUs = ref('')
    proxy.$request('get','api/v1/user/introduces',{}).then(res =>{
      connUs.value = res.data[0].president_qrcode
    })
    return{
      connUs
    }
  }
})
</script>

<style lang="less">
// 底部
.footer {
  width: 100%;
  height: 66px;
  background: #fff;
  box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.04);
  ul {
    width: 1200px;
    height: 66px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      a {
        color: #000;
        font-size: 14px;
        line-height: 66px;
        float: left;
      }
      .connect-us:hover+#qr-code{
        display: block;
        transition: all 1s ease;
        animation: conUs 1s ease;
      }
      #qr-code:hover{
        display: block;
        transition: all 1s ease;
        animation: conUs 1s ease;
      }
      @keyframes conUs{
         from{
           display: none;
           opacity: 0;
         }
         to{
           display: block;
           opacity: 1;
         }
       }
      #qr-code{
        width: 66px;
        display: none;
        float: left;
      }
      .copyright {
        color: #262626;
      }
    }
  }
}
</style>
